<template>
  <div class="h_full w_full pagewarpper hasfooter">
    <div class="pagewapperheader bg_fff flexbetween">
      <div class="c_text2 fw-6 f-14">客户群管理</div>
      <div class="flex">
        <el-button v-hasPermi="['system:customergroup:transfer']" size="small" class="bg_fff" @click="handleOpenTranfer(1)">
          <svg-icon icon-class="i_transfer" class-name="mr-5 f-12" />
          转让群主</el-button
        >
        <el-button v-hasPermi="['system:customergroup:setgroupmgt']" size="small" class="bg_fff" icon="el-icon-user"  @click="handleOpenTranfer(2)"
          >设置群管</el-button
        >
        <el-button v-hasPermi="['system:customergroup:customerset']" size="small" class="bg_fff" icon="el-icon-setting" @click="handleOpenGroupset(2)"
          >客户群设置</el-button
        >
        <el-button v-hasPermi="['system:customergroup:taskcenter']" size="small" class="bg_fff"  @click="goPage('/communityOperation/customergroup/center')"
          ><svg-icon
            icon-class="i_calendar"
            class-name="mr-5 f-12"
          />任务中心</el-button
        >
      </div>
    </div>
    <div class="pagewarpperbody">
      <div class="mb-16 bg_fff br_4">
        <el-form
          ref="queryForm"
          :model="queryParams"
          size="small"
          :inline="true"
          class="p-12 queryform"
        >
          <el-form-item label="" prop="keyword">
            <el-input
              placeholder="搜群名称/群主/群管"
              v-model="queryParams.keyword"
              @keyup.enter.native="handleQuery('keyword')"
              class="x-input-select"
              style="width: 240px"
            >
              <el-button slot="append" icon="el-icon-search" @click="handleQuery('keyword')"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item prop="qw_number" class="input_label_in_formitem">
            <template slot="label">
              <span class="c_text3">所属企微号：</span>
            </template>
            <el-select
              v-model="queryParams.qw_number"
              clearable
              @change="handleQuery('qw_number')"
              placeholder=""
              style="width: 240px"
              popper-class="pop_no_arrow"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="master" class="input_label_in_formitem">
            <template slot="label">
              <span class="c_text3">群主主体：</span>
            </template>
            <el-select
              v-model="queryParams.master"
              clearable
              @change="handleQuery('master')"
              placeholder=""
              style="width: 240px"
              popper-class="pop_no_arrow"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="tag" class="input_label_in_formitem label80">
            <template slot="label">
              <span class="c_text3">群标签：</span>
            </template>
            <el-input
              v-model="queryParams.tag"
              readonly
              clearable
              @focus="handleOpenTag"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item prop="tag" class="input_label_in_formitem label80">
            <template slot="label">
              <span class="c_text3">建群时间：</span>
            </template>
            <el-date-picker
              v-model="queryParams.times"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleQuery('times')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="tag" class="input_label_in_formitem">
            <template slot="label">
              <span class="c_text3">成为群主时间：</span>
            </template>
            <el-date-picker
              v-model="queryParams.times2"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleQuery('times2')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="tag" class="input_label_in_formitem label80">
            <template slot="label">
              <span class="c_text3">群人数：</span>
            </template>
            <el-popover placement="bottom-start" width="246" v-model="visible">
              <div class="flex">
                <el-input
                  v-model="form.min"
                  placeholder="最小值"
                  size="small"
                  style="width: 90px"
                />
                <div class="linebox flexcenter">~</div>
                <el-input
                  v-model="form.max"
                  placeholder="最大值"
                  size="small"
                  style="width: 90px"
                />
              </div>
              <div>
                <el-button
                  type="primary"
                  class="w_full mt-10"
                  size="mini"
                  @click="submitNum"
                  >确定</el-button
                >
              </div>
              <el-select
                slot="reference"
                v-model="queryParams.numberstr"
                placeholder=""
                size="small"
                clearable
                @clear="handleClear"
                popper-class="pop_no_arrow"
                style="width: 240px"
              >
              </el-select>
            </el-popover>
          </el-form-item>
          <el-form-item prop="points" class="input_label_in_formitem">
            <template slot="label">
              <span class="c_text3">托管群积分：</span>
            </template>
            <el-select
              v-model="queryParams.points"
              clearable
              placeholder=""
              @change="handleQuery('points')"
              style="width: 240px"
              popper-class="pop_no_arrow"
            >
              <el-option v-for="(item,index) in grouppoints" :key="index" :label="item.name" :value="item.value"></el-option>
              <!-- <el-option label="未托管" :value="2"></el-option> -->
            </el-select>
          </el-form-item>
        </el-form>
        <div class="searchreasult flex" v-if="isSearchResult">
          <div class="s_title">已选条件：</div>
          <div class="flex flexwrap s_content">
            <div v-for="(item,index) in searchArr" :key="index">
              <div v-if="item.value" class="commtag f-12 c_text2 mr-10 flex aligncenter">
                <span class="ctitle">{{item.name}}：{{item.value}} </span>
                <i class="el-icon-close commhover" @click="handleClearTag(item)"></i> </div>
            </div>
            <span class="commhover c_primary line_h_24" @click="resetQuery">重置条件</span>
          </div>
        </div>
      </div>
      <div class="bg_fff br_4">
        <div class="flexbetween p-12">
          <div class="f-12 c_text3">
            <span class="fw-6 f-16 c_text2">我的客户群</span> ({{ total }})
          </div>
          <el-button v-hasPermi="['system:customergroup:report']" size="small" class="bg_fff" @click="handleExport">
            <svg-icon icon-class="i_export" class-name="mr-5 f-12" />
            群数据导出
          </el-button>
        </div>
        <div class="plr-16">
          <el-table
            v-loading="loading"
            :data="tableList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="70" fixed align="center">
              <template slot="header">
                <div>全选</div>
              </template>
              <!-- <template slot="header">
                <el-dropdown>
                  <span>已读</span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click="markAsRead()">标为已读</el-dropdown-item>
                    <el-dropdown-item @click="markAsUnread()">标为未读</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template> -->
            </el-table-column>
            <el-table-column
              label="客户群"
              fixed
              prop="userName"
              width="400"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div class="flex kh_box">
                  <img
                    src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                    alt=""
                    class="useravatar"
                  />
                  <div class="khnamebox pl-12">
                    <div class="title c_222333">{{ scope.row.title }}</div>
                    <div class="c_888999 f-12">
                      <span>群成员：<span class="numbox"> 3 </span></span>
                      <span>群主：肖洁</span>
                    </div>
                  </div>
                </div>
                <!-- {{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }} -->
              </template>
            </el-table-column>
            <el-table-column
              label="所属企微号"
              prop="userName"
              width="200px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span
                  >{{ scope.row.groupusername }}等
                  <span class="c_primary">2</span>人</span
                >
                <!-- <div class="f-14 c_text2">{{ scope.row.title || "-" }}</div>
                <div class="f-13 c_text3">
                  {{ scope.row.update_time || "2023-12-13 09:11" }}
                  <span class="pl-8">分组：{{ scope.row.groupName }}</span>
                </div> -->
              </template>
            </el-table-column>
            <el-table-column
              label="企业群标签"
              prop="nickName"
              min-width="250px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.tag">中等标签</el-tag>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="保存通讯录"
              prop="email"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>1/{{ scope.row.num || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="群成员改群名"
              prop="email"
              width="130px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <i class="el-icon-circle-check c_52c41a mr-5"></i>允许{{scope.row.time}}
                <!-- <el-tag type="info">{{ scope.row.type }}</el-tag> -->
              </template>
            </el-table-column>
            <el-table-column
              label="群聊邀请确认"
              prop="email"
              width="160px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope"> {{scope.row.time}}关闭 </template>
            </el-table-column>
            <el-table-column
              label="建群时间"
              prop="email"
              width="160px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{scope.row.time}}2024-03-18 10:35</span>
              </template>
            </el-table-column>
            <el-table-column
              label="成为群主时间"
              prop="email"
              width="160px"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{scope.row.time}}2024-03-18 10:35</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              min-width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button v-hasPermi="['system:customergroup:detail']" type="text" @click="goPage('/communityOperation/customergroup/detail',scope.row)"
                  >详情</el-button
                >
                <el-button v-hasPermi="['system:customergroup:dialogue']" type="text" @click="handleEdit(scope.row)"
                  >对话</el-button
                >
                <el-button v-hasPermi="['system:customergroup:leavegroup']" type="text" @click="handleCopy(scope.row)"
                  >退群</el-button
                >
                <el-button v-hasPermi="['system:customergroup:inviteinfo']" type="text" @click="handleInvite(scope.row)" style="margin-left:0!important"
                  >邀请情况</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination
            class="mt-0"
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          /> -->
        </div>
      </div>
    </div>
    <div class="pagewapper_footer flexbetween">
      <div>
        <span class="c_primary mr-10">选择全部</span>
        <span>已选：<span class="c_primary">0</span>个</span>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        layout='prev, pager, next'
        class="qwbpagination"
      />

      <div class="flex">
        <el-tooltip
          class="item"
          effect="dark"
          content="需按单个企微号筛选时才能批量操作退群(仅在线企微号可操作)"
          placement="top-start"
        >
          <el-button
            v-hasPermi="['system:customergroup:leavegroup']"
            size="small"
            class="mr-10 bg_fff"
            plain
            type="primary"
            disabled
            >批量退群</el-button
          >
        </el-tooltip>
        <el-dropdown class="mr-10" @command="handleCommand">
          <el-button size="small" plain type="primary">
            修改群名<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-hasPermi="['system:customergroup:editgroupname']" command="a">修改群名</el-dropdown-item>
            <el-dropdown-item v-hasPermi="['system:customergroup:permiteditgroupname']" command="b">允许群成员改群名</el-dropdown-item>
            <el-dropdown-item v-hasPermi="['system:customergroup:baneditgroupname']" command="c">禁止群成员改群名</el-dropdown-item>
            <el-dropdown-item v-hasPermi="['system:customergroup:openinvite']" command="d">开启群聊邀请确认</el-dropdown-item>
            <el-dropdown-item v-hasPermi="['system:customergroup:closeinvite']" command="e">关闭群聊邀请确认</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown v-hasPermi="['system:customergroup:addressbook']" class="mr-10" @command="handleCommand">
          <el-button size="small" plain type="primary">
            保存到通讯录<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">保存至通讯录</el-dropdown-item>
            <el-dropdown-item command="b">取消保存至通讯录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown v-hasPermi="['system:customergroup:labelmgt']" @command="handleCommand">
          <el-button size="small" plain type="primary">
            管理标签<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">打标签</el-dropdown-item>
            <el-dropdown-item command="b">移除标签</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 搜索-群标签 -->
    <select-tag :visable.sync="opentag" />
    <!-- 转让群主 设置群管 -->
    <master-transfer v-if="opentransfer" :type='kindType' :visable.sync="opentransfer" />
    <!-- 客户群设置 -->
    <group-setting v-if="openGroupset" :visable.sync="openGroupset" />
    <!-- 导出 -->
    <export-comm v-if="openExport" :visable.sync="openExport" />
    <!-- 批量修改群名称 -->
    <UpdateGroupName v-if="open_updatename" :visable.sync="open_updatename" />
    <!-- 邀请情况 -->
    <InviteDetail v-if="openInvite" :visable.sync="openInvite"/>
  </div>
</template>
<script>
import SelectTag from "./SelectTag.vue";
import MasterTransfer from './MasterTransfer.vue'
import GroupSetting from './GroupSetting.vue'
import ExportComm from '@/components/ExportComm'
import UpdateGroupName from './UpdateGroupName.vue'
import InviteDetail from './InviteDetail.vue'
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword:'',
        qw_number:'',
        master:'',
        tag:'',
        times:'',
        times2:'',
        numberstr: "",
      },
      searchArr:[
        {name:'搜索', params:'keyword',value:'' },
        {name:'所属企微号', params:'qw_number',value:'' },
        {name:'群主主体', params:'master',value:'' },
        {name:'群标签', params:'tag',value:'' },
        {name:'建群时间', params:'times',value:'' },
        {name:'成为群主时间', params:'times2',value:'' },
        {name:'群人数', params:'numberstr',value:'' },
        {name:"托管群积分", params:'points',value:''}
      ],
      grouppoints:[
        {name:"已托管", value:1},
        {name:"未托管", value:2},
      ],
      form: {
        min: "",
        max: "",
      },
      visible: false,
      total: 100,
      loading: false,
      tableList: [
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
        { title: "测试去聊天", groupusername: "小洁" },
      ],
      opentag: false,
      // searchReasult:{},
      opentransfer:false,
      kindType:'',
      openGroupset:false,
      openExport:false,
      open_updatename:false,
      openInvite:false,
      rowitem:null
    };
  },
  components: {
    SelectTag,
    MasterTransfer,
    GroupSetting,
    ExportComm,
    UpdateGroupName,
    InviteDetail
  },
  computed:{
    isSearchResult(){
      let result = this.searchArr.filter(item=>item.value)
      return result.length
    }
  },
  methods: {
    handleSelectionChange() {},

    markAsRead(){},

    markAsUnread(){},

    submitNum() {
      this.queryParams.numberstr = this.form.min + " ~ " + this.form.max;
      this.visible = false;
      this.handleQuery('numberstr')
    },

    handleClear() {
      this.form.max = "";
      this.form.min = "";
    },

    handleOpenTag() {
      this.opentag = true;
    },

    getList() {},

    /** 搜索按钮操作 */
    handleQuery(key) {
      this.queryParams.pageNum = 1;
      this.searchArr.forEach(item=>{
        if(item.params == key){
          if(key == 'times' || key == 'times2'){
            item.value = this.queryParams[key][0] + '至' + this.queryParams[key][1]
          }else if(key == 'points'){
            // grouppoints
            this.grouppoints.forEach(p=>{
              if(p.value == this.queryParams[key]){
                item.value = p.name
              }
            })
          }
          else{
            item.value = this.queryParams[key]
          }
        }
      })
      console.log('this.searchArr:', this.searchArr)
      // if(this.queryParams[key]){
      //   this.searchReasult = Object.assign({},this.searchReasult,{[key]:this.queryParams[key]})
      // }else{
      //   let {key, ...newObj} = this.searchReasult;
      //   this.searchReasult = newObj
      // }
      // console.log('this.searchReasult:', this.searchReasult)
      this.getList();
    },

    handleClearTag(item){
      item.value = ''
      this.queryParams[item.params] = ''
      if(item.params == 'numberstr'){
        this.clearFrom()
      }
    },

    clearFrom(){
      this.form ={
        min:'',
        max:''
      }
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      // this.searchReasult = {}
      this.searchArr.forEach(item=>{
        item.value = ''
      })
      this.clearFrom()
      this.handleQuery();
    },

    // 转让群主 设置群管
    handleOpenTranfer(type){
      this.kindType = type
      this.opentransfer = true
    },

    // 客户群设置
    handleOpenGroupset(){
      this.openGroupset = true
    },

    goPage(path){
      this.$router.push({path})
    },
    // 邀请情况
    handleInvite(row){
      this.rowitem =row
      this.openInvite = true
    },

    handleCommand(type) {
      console.log("type:", type);
      switch (type) {
        case "a":
          this.open_updatename = true
          break;
        default:
          break;
      }
    },

    handleExport(){
      this.openExport = true
    }
  },
};
</script>
<style lang="scss" scoped>
.kh_box {
  max-width: 360px;
}
.khnamebox {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.numbox {
  display: inline-block;
  width: 30px;
}
.linebox {
  width: 36px;
}
.queryform .el-form-item {
  margin-bottom: 5px;
}
.searchreasult {
  border-top: 1px dashed #e9e9e9;
  padding: 12px;
  width: 100%;
}
.s_title{
  width: 100px;
}
.s_content{
  width: calc(100% - 100px);
}
.commtag{
  max-width: 356px;
  .ctitle{
    // max-width: calc(100% - 18px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>